<template>
  <div class="news-detail-container">
    <el-card class="news-detail-card">
      <div class="news-header">
        <h1 class="news-title">{{ newsDetail.title }}</h1>
        <div class="news-meta">
          <span>发布时间：{{ newsDetail.createTime }}</span>
        </div>
      </div>
      <div class="news-content" v-html="newsDetail.content"></div>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import request from '@/utils/request'

interface NewsDetail {
  id: number
  title: string
  content: string
  createTime: string
}

const route = useRoute()
const newsDetail = ref<NewsDetail>({
  id: 0,
  title: '',
  content: '',
  createTime: ''
})

const fetchNewsDetail = async () => {
  try {
    const response = await request.get<ApiResponse<NewsDetail>>(`/news/${route.params.id}`)
    if (response.data && response.data.data) {
      newsDetail.value = response.data.data
    }
  } catch (error) {
    ElMessage.error('获取新闻详情失败')
  }
}

onMounted(() => {
  fetchNewsDetail()
})
</script>

<style scoped>
.news-detail-container {
  padding: 20px;
}

.news-detail-card {
  margin-bottom: 20px;
}

.news-header {
  margin-bottom: 20px;
  text-align: center;
}

.news-title {
  font-size: 24px;
  color: #303133;
  margin-bottom: 10px;
}

.news-meta {
  color: #909399;
  font-size: 14px;
}

.news-content {
  line-height: 1.8;
  color: #606266;
}

.news-content :deep(img) {
  max-width: 100%;
  height: auto;
}

.news-content :deep(p) {
  margin-bottom: 16px;
}
</style>